<template>
  <div>
    <!-- 头部 -->
    <home-head />
    <!-- /头部 -->
    <div class="wrap">
      <van-pull-refresh v-model="isLoading"
                        @refresh="onRefresh">
        <!-- 轮播 -->
        <van-swipe class="my-swipe"
                   :autoplay="3000"
                   indicator-color="white">
          <van-swipe-item v-for="banner in banners"
                          :key="banner.id">
            <img :src="banner.picUrl"
                 alt="">
          </van-swipe-item>
        </van-swipe>
        <!-- /轮播 -->
        <!-- 标签 -->
        <div class="evaluate">
          <div class="list">
            <van-icon name="passed"></van-icon>
            <span>认证龙头企业</span>
          </div>
          <div class="list">
            <van-icon name="passed"></van-icon>
            <span>16年品质</span>
          </div>
          <div class="list">
            <van-icon name="passed"></van-icon>
            <span>3小时送达</span>
          </div>
          <div class="list">
            <van-icon name="passed"></van-icon>
            <span>最近428812条好</span>
          </div>
        </div>
        <!-- /标签 -->
        <!-- 宫格导航 -->
        <van-grid clickable
                  icon-size="40">
          <van-grid-item v-for="cate in cates"
                         :key="cate.id"
                         :icon="cate.icon"
                         :text="cate.name"
                         @click="ClickList(cate.id, cate.name)" />
        </van-grid>
        <!-- /宫格导航 -->
        <!-- 商品列表 -->
        <van-list v-model="loading"
                  :offset="30"
                  :finished="finished"
                  finished-text="我也是有底线的= ="
                  @load="onLoad">
          <home-items :items="items" />
        </van-list>
        <!-- /商品列表 -->
      </van-pull-refresh>
    </div>
    <!-- banner -->
    <home-banner />
    <!-- /banner -->
  </div>
</template>

<script>
import HomeBanner from 'components/HomeBanner'
import HomeHead from './components/HomeHead.vue'
import HomeItems from './components/HomeItems.vue'
/* import { isLogin, getToken } from 'utils'
import { Toast } from 'vant' */
import { fetchCate, fetchBanner, fetchItem } from 'api'
export default {
  name: 'Home',
  data () {
    return {
      cates: [],
      banners: [],
      items: [],
      isLoading: false, // 下拉状态
      page: 1,
      pageSize: 5,
      loading: false, // 是否上拉触底 加载下一页
      finished: false // 上拉是否到达最后一页
    }
  },
  created () {
    this.fetchCates()
    this.fetchBanners()
    this.$store.state.home.Homethis = this
    // console.log(this.$store)
    // this.$store.dispatch('cart/fetch_AddCart')
    // this.$store.commit('cart/set_items', this.items)
  },
  methods: {
    /* addCart ({ id }) {
      if (!isLogin()) {
        Toast.fail({
          message: '请登录',
          duration: 1000,
          onClose: () => {
            this.$router.push({
              path: '/login',
              query: {
                from: '/home'
              }
            })
          }
        })
        return false
      }
      // 如果登录了， 加入购物车
      addCart({
        goodsId: id,
        number: 1,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          Toast.success('加入成功')
          this.$store.commit('cart/set_items', res.data.data.items)
        }
      })
    }, */
    ClickList (id, name) {
      this.$router.push(`/itemlist/${id}/${name}`)
    },
    // clickDetail ({ id }) {
    //   this.$router.push({
    //     path: '/detail',
    //     query: {
    //       id
    //     }
    //   })
    // },
    onLoad () {
      this.fetchItems() // 上拉触底了
      this.page++ // 加载下一页
    },
    onRefresh () {
      // 刷新回到第一页
      this.page = 1
      this.items = []
      // 改变最后一页状态
      this.finished = false
      this.onLoad()
    },
    fetchItems () {
      fetchItem({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        this.isLoading = false
        this.loading = false
        if (res.data.code === 700) {
          this.finished = true
        }
        if (res.data.code === 0) {
          this.loading = false
          // console.log(res)
          this.items = [
            ...this.items,
            ...res.data.data.result
          ]
        }
      })
    },
    fetchCates () {
      fetchCate().then(res => {
        if (res.data.code === 0) {
          // console.log(res)
          this.cates = res.data.data.splice(0, 8)
        }
      })
    },
    fetchBanners () {
      fetchBanner().then(res => {
        if (res.data.code === 0) {
          // console.log(res)
          this.banners = res.data.data
        }
      })
    }
  },
  components: {
    HomeBanner,
    HomeHead,
    HomeItems
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 50px 0;
  .my-swipe {
    width: 94%;
    border-radius: 12px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .van-grid {
    width: 94%;
    overflow: hidden;
    border-radius: 10px;
    margin: 0 auto;
  }
  .evaluate {
    width: 94%;
    border-radius: 10px;
    font-size: 12px;
    display: flex;
    justify-content: space-evenly;
    color: #666;
    align-items: center;
    height: 26px;
    margin: 0 auto;
    .list {
      display: flex;
      align-items: center;
    }
  }
}
</style>
